
<!-- 导航 -->
    <div class="nav-left">
        <img src="../img/images/ybk.png" alt="" srcset="">
    </div>
    <div class="nav-right">
        <div class="burger">
            <div class="x"></div>
            <div class="y"></div>
            <div class="z"></div>
        </div>
        <ul>
            <li class="active">
                <a href="./index.html">首页</a>
            </li>
            <li> 
                <a href="./productClass.html">产品中心</a> 
                <div class="product-child">
                    <ul>
                        <li>
                            <div class="iconfont icon-zidongshouhuoji"></div>
                            <span>售药机</span>
                        </li>
                        <li>
                            <div class="iconfont icon-zidongshouhuoji1"></div>
                            <span>饮料零食机</span>
                        </li>
                        <li>
                            <div class="iconfont icon-shouhuoji"></div>
                            <span>常温格子柜</span>
                        </li>
                        <li>
                            <div class="iconfont icon-shouhuoji"></div>
                            <span>保温格子柜</span>
                        </li>
                        <li>
                            <div class="iconfont icon-zidongshouhuoji2"></div>
                            <span>升降机</span>
                        </li>
                        <li>
                            <div class="iconfont icon-zidongshouhuoji1"></div>
                            <span>全户外售货机</span>
                        </li>
                        <li>
                            <div class="iconfont icon-zidongshouhuoji"></div>
                            <span>派样机</span>
                        </li>
                    </ul>
                </div>
            </li>
            <li> 
                <a href="./system.html">盈利云系统</a> 
            </li>
            <li> 
                <a href="./custom.html">定制代工</a> 
            </li>
            <li> 
                <a href="./about.html">品牌故事</a> 
            </li>
            <li> 
                <a href="./contact.html">联系我们</a> 
            </li>
        </ul>
    </div>



<script>
    $('.clearfix ul').on("click","li",function(e){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        sessionStorage.setItem('navIndex',$(this).index())
    })
    $('.product-child ul').on("click","li",function(e){
        // let param = $(this).data("name")
        sessionStorage.setItem('navIndex',1)
        window.open('./productClass.html')
    })

    //跳转后被点击的li添加active
    let index = sessionStorage.getItem('navIndex') || 0
    let doc = $(".nav-right>ul").children("li")
    if(index){
        doc[0].classList.remove('active')
        doc[index].classList.add('active')
    }

    let arr = ['productClass','index','detail','product']
    let isShow = arr.some(ele=>{
        return location.pathname.includes(ele)
    })
    if(isShow) $('.nav-left').css({"opacity":"0"})

    $('.burger').on('click',function(){
        if($('.x').hasClass('x-rotate')){
            $('.x').removeClass('x-rotate nav-collapse')
            $('.z').removeClass('z-rotate nav-collapse')
            $('.y').removeAttr('style')

            $('.nav-right ul').removeAttr('style')
        }else{
            $('.x').addClass('x-rotate nav-collapse')
            $('.z').addClass('z-rotate nav-collapse')
            $('.y').attr({style:'display:none'}) 
            $('.nav-right ul').attr({style:'display:block'})           
        }
    })
    
</script>